<template>
	<div class="form">
		<div class="header">
			<uni-icons type="left" size="23" color="#fff" @click="toPage(-1)"></uni-icons>
			<span class="title">自定义表单</span>
		</div>
		<div style="margin-top: 80rpx">
			<div class="text">
				<p class="custom">{{ infoName }}</p>
				<!-- <p class="content">· 表单内容完善 ·</p> -->
			</div>
			<div class="form-content">
				<div class="zhanwei"></div>
				<div class="forms" v-for="item in forms.fields" :key="item.__config__.formId">
					<vDivider :text="item.__config__.label" :position="item.__config__.position" v-if="item.__config__.tag === 'el-divider'"></vDivider>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'span'" :inline="item.__config__.label.length > 4" :required="item.__config__.required">
						<div class="span">{{ item.__config__.defaultValue }}</div>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-input'" :inline="item.type === 'textarea' || item.__slot__.prepend.length > 3 || item.__config__.label.length > 4" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vInput v-if="item.type === 'textarea'" type="textarea" v-model="item.__config__.defaultValue" :readonly="item.readonly" :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="item.maxlength" :rows="item.autosize" :showLimit="item['show-word-limit']">
							<template #prepend>
								{{ item.__slot__ ? item.__slot__.prepend : "" }}
							</template>
							<template #append>
								{{ item.__slot__ ? item.__slot__.append : "" }}
							</template>
						</vInput>
						<vInput v-else-if="item['show-password']" type="password" v-model="item.__config__.defaultValue" :readonly="item.readonly" :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="item.maxlength" :clearable="item.clearable" :prepend="item.__slot__.prepend" :append="item.__slot__.append">
							<template #prepend>
								{{ item.__slot__ ? item.__slot__.prepend : "" }}
							</template>
							<template #append>
								{{ item.__slot__ ? item.__slot__.append : "" }}
							</template>
						</vInput>
						<vInput v-else type="text" v-model="item.__config__.defaultValue" :readonly="item.readonly" :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="item.maxlength" :clearable="item.clearable" :prepend="item.__slot__.prepend" :append="item.__slot__.append">
							<template #prepend>
								{{ item.__slot__ ? item.__slot__.prepend : "" }}
							</template>
							<template #append>
								{{ item.__slot__ ? item.__slot__.append : "" }}
							</template>
						</vInput>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-switch'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vSwitch v-model="item.__config__.defaultValue" :activeColor="item['active-color']" :inactiveColor="item['inactive-color']" :activeValue="item['active-value']" :inactiveValue="item['inactive-value']">
							<template #inactiveText>
								{{ item["inactive-text"] ? item["inactive-text"] : "" }}
							</template>
							<template #activeText>
								{{ item["active-text"] ? item["active-text"] : "" }}
							</template>
						</vSwitch>
					</vFormItem>
					<vFormItem :inline="item.__slot__.options.length >= 3 || item.__config__.label.length > 4" :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-checkbox-group'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vCheckbox v-model="item.__config__.defaultValue" :options="item.__slot__.options" :disabled="item.disabled" :optionType="item.__config__.optionType" :size="item.size" :min="item.min" :max="item.max"></vCheckbox>
					</vFormItem>
					<vFormItem :inline="item.__slot__.options.length >= 3 || item.__config__.label.length > 4" :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-radio-group'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vRadio v-model="item.__config__.defaultValue" :options="item.__slot__.options" :disabled="item.disabled" :optionType="item.__config__.optionType" :size="item.size"></vRadio>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-slider'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vRangeSlider v-if="item.range" v-model="item.__config__.defaultValue" :disabled="item.disabled" :min="item.min" :max="item.max" :step="item.step"></vRangeSlider>
						<vSlider v-else v-model="item.__config__.defaultValue" :disabled="item.disabled" :min="item.min" :max="item.max" :step="item.step"></vSlider>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-rate'" :required="item.__config__.required" :inline="item.max > 10 || item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vRate v-model="item.__config__.defaultValue" :disabled="item.disabled" :max="item.max" :half="item['allow-half']" :showText="item['show-text']" :showScore="item['show-score']"></vRate>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-date-picker'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vDatePicker v-if="item.type === 'date'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="item.clearable" :format="item['value-format'] || item.format" :readonly="item.disabled" type="date" :placeholder="item.placeholder"></vDatePicker>
						<vDatePicker
							v-else-if="item.type === 'daterange'"
							v-model="item.__config__.defaultValue"
							:disabled="item.disabled"
							:clearable="item.clearable"
							:format="item['value-format'] || item.format"
							:readonly="item.disabled"
							:placeholder="item.placeholder"
							:rangeSeparator="item['range-separator']"
							:startPlaceholder="item['start-placeholder']"
							:endPlaceholder="item['end-placeholder']"
							type="daterange"
						></vDatePicker>
						<vDatePicker
							v-else-if="item.type === 'datetimerange'"
							v-model="item.__config__.defaultValue"
							:disabled="item.disabled"
							:clearable="item.clearable"
							:format="item['value-format'] || item.format"
							:readonly="item.disabled"
							:placeholder="item.placeholder"
							:rangeSeparator="item['range-separator']"
							:startPlaceholder="item['start-placeholder']"
							:endPlaceholder="item['end-placeholder']"
							type="datetimerange"
						></vDatePicker>
						<vDatePicker v-else-if="item.type === 'datetime'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="item.clearable" :format="item['value-format'] || item.format" :readonly="item.disabled" type="datetime" :placeholder="item.placeholder"></vDatePicker>
						<vDatePicker v-else-if="item.type === 'month'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="item.clearable" :format="item['value-format'] || item.format" :readonly="item.disabled" type="month" :placeholder="item.placeholder"></vDatePicker>
						<vDatePicker v-else-if="item.type === 'year'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="item.clearable" :format="item['value-format'] || item.format" :readonly="item.disabled" type="year" :placeholder="item.placeholder"></vDatePicker>
						<vDatePicker v-else-if="item.type === 'week'" v-model="item.__config__.defaultValue" :disabled="item.disabled" :clearable="item.clearable" :format="item['value-format'] || item.format" :readonly="item.disabled" type="week" :placeholder="item.placeholder"></vDatePicker>
					</vFormItem>

					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-time-picker'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vTimePicker v-if="item['is-range']" v-model="item.__config__.defaultValue" :disabled="item.disabled" :type="'timeRange'" :format="item['value-format'] || item.format" :clearable="item.clearable" :startPlaceholder="item['start-placeholder']" :endPlaceholder="item['end-placeholder']" :separator="item['range-separator']"></vTimePicker>

						<vTimePicker v-else v-model="item.__config__.defaultValue" :disabled="item.disabled" :placeholder="item.placeholder" :type="'time'" :selectable="item['picker-options']" :format="item['value-format'] || item.format" :clearable="item.clearable"></vTimePicker>
					</vFormItem>

					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-input-number'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vNumberBox v-model="item.__config__.defaultValue" :disabled="item.disabled" :min="item.min" :max="item.max" :step="item.step" :strictly="item['step-strictly']" :position="item['controls-position']" :precision="item.precision" :placeholder="item.placeholder"></vNumberBox>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-color-picker'" :required="item.__config__.required" :showLabel="item.__config__.showLabel">
						<vColorPicker v-model="item.__config__.defaultValue" :colorFormat="item['color-format']" :measure="item.size" :disabled="item.disabled"></vColorPicker>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-select'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vSelect v-model="item.__config__.defaultValue" :disabled="item.disabled" :list="item.__slot__.options" :placeholder="item.placeholder" :multiple="item.multiple" :filterable="item.filterable"></vSelect>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'el-cascader'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vCascadeSelect v-model="item.__config__.defaultValue" :disabled="item.disabled" :list="item.options" :placeholder="item.placeholder" :filterable="item.filterable" :separator="item.separator"></vCascadeSelect>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'image-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vUpload v-model="item.__config__.defaultValue" :disabled="item.disabled" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadcardType" type="image" :fileSize="item.__config__.fileSize" :multiple="item.multiple"></vUpload>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'video-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vUpload v-model="item.__config__.defaultValue" :disabled="item.disabled" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadvideo" type="video" :fileSize="item.__config__.fileSize"></vUpload>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'file-upload'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vUpload v-model="item.__config__.defaultValue" :disabled="item.disabled" :showTip="item.__config__.showTip" :max="item.__config__.limit" @change="onUploadfile" type="file" isDownload :fileSize="item.__config__.fileSize"></vUpload>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'fortress-region'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel">
						<vRegion v-model="item.__config__.defaultValue" :disabled="item.disabled" @changeRegion="region" :placeholder="item.placeholder" type="1"></vRegion>
					</vFormItem>
					<vFormItem :label="item.__config__.label" v-else-if="item.__config__.tag === 'phone_sms'" :required="item.__config__.required" :inline="item.__config__.label.length > 4" :showLabel="item.__config__.showLabel" :code="item.__vModel__">
						<vGetCode v-model="item.__config__.defaultValue" @change="changeCode" :second="item.intervalSecond" :validMinutes="item.validityMinute" @time="getTime"></vGetCode>
					</vFormItem>
				</div>
			</div>
			<div class="footer">
				<div class="button" @click="cancel">取消</div>
				<div class="button" @click="confirm">提交</div>
				<!-- <button class="mini-btn" type="default" @click="cancel">取消</button>
					<button class="mini-btn button" type="primary" @click="confirm">提交</button> -->
			</div>
		</div>
	</div>
</template>

<script>
import dayjs from "dayjs"
import { backend } from "../../uni/index.js"
import request from "../../uni/request.js"
import { dynamicStateForm } from "@/uni/uni.js"
import mixin from "@/mixin"
import vFormItem from "./components/form-item.vue"
import vDivider from "../../components/divider/index.vue"
import vInput from "./components/input.vue"
import vSwitch from "./components/switch.vue"
import vCheckbox from "./components/checkbox.vue"
import vRadio from "./components/radio.vue"
import vSlider from "./components/slider.vue"
import vRangeSlider from "./components/range-slider.vue"
import vRate from "./components/rate.vue"
import vDatePicker from "./components/date-picker.vue"
import vNumberBox from "./components/number-box.vue"
import vColorPicker from "./components/color-picker.vue"
import vTimePicker from "./components/time-picker.vue"
import vSelect from "./components/select.vue"
import vCascadeSelect from "./components/cascade-select.vue"
import vUpload from "./components/upload/upload.vue"
import vRegion from "./components/region.vue"
import vGetCode from "./components/getCode.vue"

export default {
	mixins: [mixin],
	name: "forms",
	data() {
		return {
			infoName: "",
			id: "",
			saveUrl: "",
			forms: {
				fields: [],
			},
			code: "",
			time: "",
			currentTime: "",
			dataForm: {},
			regionName: "",
		}
	},
	computed: {},
	created() {
		this.getForm()
	},
	methods: {
		getForm() {
			this.id = window.location.search.slice(4)
			dynamicStateForm(this.id).then(res => {
				this.saveUrl = res.saveUrl
				this.forms = JSON.parse(res.viewContent)
				// console.log(this.forms.fields, "forms")
				this.infoName = res.name
			})
		},
		onUploadcardType(list) {
			console.log(list, "list")
			// this.formData.cardType = list
		},
		onUploadvideo(list) {
			console.log(list, "list")
		},
		onUploadfile(list) {
			console.log(list, "list")
		},
		saveForm(data) {
			return request("post", `${backend}/${this.saveUrl}`, data)
		},
		cancel() {
			this.$router.go(-1)
		},
		changeCode(code) {
			this.code = code
		},
		// 获取时间
		getTime(time) {
			console.log(time, "196")
			this.time = time
		},
		changeList(list) {
			console.log(list, "list")
		},

		isEmpty(value) {
			if (Array.isArray(value)) {
				return value.length === 0
			}
			return typeof value === "undefined" || value === null || value === ""
		},

		// 提交表单
		confirm() {
			this.currentTime = dayjs().valueOf()

			if (
				this.forms.fields.some(item => {
					if (item.__config__.tag === "el-input" && item.__config__.regList2?.id) {
						const str = item.__config__.regList2.pattern
						const pattern = str.replaceAll("/", "")
						const reg = new RegExp(pattern)
						console.log(reg)
						if (!reg.test(item.__config__.defaultValue)) {
							this.$u.toast(item.__config__.regList2.message)
							return true
						}
						return false
					}
					if (item.__config__.tag === "el-divider" || item.__config__.tag === "span") {
						return false
					}

					if (item.__config__.required && this.isEmpty(item.__config__.defaultValue)) {
						this.$u.toast(item.__config__.label + "不能为空")
						return true
					}

					if (item.__config__.tag === "phone_sms") {
						if (this.time) {
							if (this.currentTime - this.time > item.__config__.validityMinute * 60 * 1000) {
								this.$u.toast("验证码已失效，请重新获取验证码")
								return true
							}
						}
					}

					return false
				})
			) {
				return
			}
			// console.log(this.dataForm, "dataForm")

			this.dataForm = this.forms.fields.reduce((acc, item) => {
				if (item.__config__.tag === "el-divider" || item.__config__.tag === "span") {
					return acc
				}
				if (item.__config__.tag === "fortress-region") {
					return {
						...acc,
						[item.__vModel__]: item.__config__.defaultValue,
						[item.__vModel__ + "Name"]: this.regionName,
					}
				}
				return {
					...acc,
					[item.__vModel__]: item.__config__.defaultValue,
				}
			}, {})

			if (this.forms.fields.map(item => item.__config__.tag).includes("phone_sms")) {
				this.dataForm["code_sms"] = this.code
			}

			this.saveForm({
				formData: this.dataForm,
				tbId: this.id,
			})
				.then(res => {
					console.log(res)
					// this.$u.toast("提交成功")
					this.toPage("/pages/form/submitSuccess")
					// this.$router.go(-1)
				})
				.catch(err => {
					console.log(err)
					this.$u.toast(err.data.msg || "提交失败")
				})
		},
		region(value) {
			this.regionName = value
		},
		// onChangeTime(val) {
		// 	console.log(val, "time")
		// },
	},
	components: {
		vFormItem,
		vDivider,
		vInput,
		vSwitch,
		vCheckbox,
		vRadio,
		vSlider,
		vRate,
		vDatePicker,
		vNumberBox,
		vColorPicker,
		vTimePicker,
		vSelect,
		vCascadeSelect,
		vUpload,
		vRegion,
		vGetCode,
		vRangeSlider,
	},
}
</script>

<style lang="scss" scoped>
.form {
	position: relative;
	overflow: hidden;
	// height: 100vh;
	width: 100%;
	padding-bottom: 20rpx;
	background: url("@/static/forms/background.png") no-repeat;
	background-size: 100%;
	.header {
		width: 100%;
		padding: 10rpx;
		position: fixed;
		display: flex;
		align-items: center;
		top: 0;
		.title {
			color: #fff;
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}
	.text {
		padding: 20rpx 40rpx 40rpx;
		.custom {
			font-size: 40rpx;
			color: #fff;
		}
		.content {
			font-size: 28rpx;
			color: #fff;
		}
	}
}
.form-content {
	// margin: 10rpx 20rpx 150rpx;
	margin: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.zhanwei {
	padding: 20rpx 25rpx;
	font-size: 30rpx;
}
.forms {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	.span {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 1; //显示几行
	}
}
.footer {
	z-index: 99;
	// position: fixed;
	// bottom: 0;
	width: 100%;
	background-color: #fff;

	padding: 20rpx 40rpx;
	// text-align: right;
	// margin-top: 40rpx;
	// margin-bottom: 40rpx;
	display: flex;
	gap: 20rpx;
	align-items: center;
	.button {
		cursor: pointer;
		flex: 1;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 40rpx;
		color: #fff;
		background: #0076ff;
		font-size: 30rpx;
		&:first-child {
			background: #dddee4;
		}
	}
}
</style>
